<template lang="pug">
  .business-wrap  
    //- .top
    //-   .top-bg(:style="{backgroundImage:`url(${infor.picUrl})`}")
    //-   .top-info 
    //-     img(:src="infor.shopIcon")
    //-     dl
    //-       dt.shop-name {{infor.shopName}}
    //-       dd.notice 公告：{{infor.shopNotice?infor.shopNotice:'暂无公告'}}
    ul.nav
      li(v-for="item,index in navs" :key="item.title" @click="goSec(index)") {{item.title}}
    router-view
    goodsdetails(v-show="true")
</template>
<script>
import goodsdetails from '@/views/xyh/business/goodsdetails.vue'
export default {
  name:"business",
  data(){
    return {
      infor:{},
      navs:[
        {title:'商品',path:"goods"},
        {title:'评价',path:"comment"},
        {title:'商家',path:"business"},
      ]
    }
  },
  components:{
    goodsdetails,
  },
  methods:{
    getData(){
      this.axios.get('/data/business/1.json').then(res=>{
        console.log(res)
        this.infor = res.data
      })
    },
    goSec(a){
      this.$router.push({
        path:this.navs[a].path
      })
    }
  },
  created(){
   this.getData()
  }
}
</script>
<style scoped lang="scss">
  .top {
    position: relative;
    height:4rem;
    width: 100%;
    .top-bg {
      width: 100%;
      height: 4rem;
      filter: blur(5px);
      background-size:cover ;
     }
    .top-info {
      position: absolute;
      bottom:0;
      left: .2rem;
      width: 100%;
      display: flex;
      img {
        width: .76rem;
        height: 0.76rem;
      }
      dl {
        display: flex;
        flex-direction: column;
        font-size: .3rem;
        color:white;
      }
    }
   
  }
  .nav {
    display: flex;
    justify-content: space-evenly;
    font-size: .3rem;
  }
</style>